<template>
	<view class="template-home tn-safe-area-inset-bottom">
		<!-- 黑色滚动背景 -->
		<view class="bg-contaniner" style="background-color: #000000;">
			<!-- <view class="tn-flex  go2">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<button :plain="true" shape="round" backgroundColor="#FFFFFF" fontColor="#FFFFFF" width="40vw"
						height="70rpx" @click="tn('/productPages/details')">
						即刻探索
						<text class="tn-icon-right-arrow tn-padding-left-xs"></text>
					</button>
				</view>
			</view> -->
			
			<view class="home_btn" @click="tn('/pages/index/index')">
				即刻探索
			</view>
		</view>
		<!-- 套娃式轮播 -->
		<view style="height:300px;margin-top: 50%;">
			<!-- 书的主体 -->
			<view class="book preserve-3d">
				<!-- 书的最后一页 -->
				<view class="book-page-box book-page-4 preserve-3d">
					<view class="book-page page-front">
						<p>技术支持</p>
					</view>
				</view>
				<!-- 书的第三页 -->
				<view class="book-page-box book-page-3 preserve-3d flip-animation-3">
					<view class="book-page page-front">
						<p>高性能</p>
					</view>
				</view>
				<!-- 书的第二页 -->
				<view class="book-page-box book-page-2 preserve-3d flip-animation-2">
					<view class="book-page page-front">
						<p>跨平台兼容</p>
					</view>
				</view>
				<!-- 书的封面 -->
				<view class="book-page-box book-page-1 preserve-3d flip-animation-1">
					<view class="book-page page-front">
						<p>
						<view class="d_gift">svga</view>
						<view class="fenmian_s">礼物特效</view>
						</p>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				cardCur: 0,
			}
		},
		onLoad() {},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// imgSwiper
			imgSwiper(e) {
				this.imgCur = e.detail.current
			},
			// 短震动跳转
			tn(e) {
				wx.vibrateShort();
				// uni.navigateTo({
				// 	url: e,
				// });
				wx.switchTab({
					url: e,
					success: function(res) {
						// 跳转成功
					},
					fail: function(err) {
						// 错误处理
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-home {
		max-height: 100vh;
		position: relative;
	}
	.home_btn{
		width: 320rpx;
		height: 80rpx;
		border: 1px solid #fff;
		position: absolute;
		left: 28%;
		bottom: 20%;
		transform: translate(-45%,-20%);
		border-radius: 120rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		font-size: 34rpx;
		box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
	}
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__logo {
			margin: auto 5rpx;
			font-size: 50rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}
	}

	/* 自定义导航栏内容 end */

	// css不写多一些，页面的玩法就很难炫起来，所以别吐槽css多了，下方分类的很清晰了的，且尽量不用那种看不懂的css写法了的


	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}


	/* 移动背景部分 start*/
	.bg-contaniner {
		position: fixed;
		top: -0rpx;
		left: -300rpx;
		--text-color: hsl(0 95% 60%);
		--bg-color: hsl(0 0% 100%);
		--bg-size: 200px;
		height: 100%;
		display: grid;
		place-items: center;
		place-content: center;
		overflow: hidden;
		background-color: var(--bg-color);
		z-index: -1;
	}

	.bg-contaniner::before {
		--size: 150vmax;
		content: "";
		inline-size: var(--size);
		block-size: var(--size);
		background-image: url("https://cdn.nlark.com/yuque/0/2023/png/280373/1685589478750-assets/web-upload/1266f58d-48a7-4799-b3d8-02640f5712d3.png");
		background-size: var(--bg-size);
		background-repeat: repeat;
		transform: rotate(45deg);
		opacity: 0.25;
		animation: bg 6s linear infinite;
	}

	@media (prefers-reduced-motion: reduce) {
		.bg-contaniner::before {
			animation-duration: 0s;
		}
	}

	@keyframes bg {
		to {
			background-position: 0 calc(var(--bg-size) * -1);
		}
	}

	/* 移动背景部分 end*/
	.book {
		position: absolute;
		top: 50%;
		left: 30%;
		margin-top: -150px;
		width: 200px;
		height: 300px;
		background-color: #fff;
		-webkit-transform: rotateX(30deg);
		-ms-transform: rotateX(30deg);
		-o-transform: rotateX(30deg);
		transform: rotateX(30deg);
	}

	.preserve-3d {
		/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.book-page {
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		height: 300px;
		border: 1px solid #7b68ee;
		text-align: center;
	}

	.book-page-box {
		-webkit-transform-origin: 0 50%;
		-moz-transform-origin: 0 50%;
		-ms-transform-origin: 0 50%;
		-o-transform-origin: 0 50%;
		transform-origin: 0 50%;
		-webkit-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	/* flipBook1	 */
	@keyframes flipBook1 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-160deg);
			-ms-transform: rotateY(-160deg);
			-o-transform: rotateY(-160deg);
			transform: rotateY(-160deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Firefox */
	@-moz-keyframes flipBook1 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-160deg);
			-ms-transform: rotateY(-160deg);
			-o-transform: rotateY(-160deg);
			transform: rotateY(-160deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Safari and Chrome */
	@-webkit-keyframes flipBook1 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-160deg);
			-ms-transform: rotateY(-160deg);
			-o-transform: rotateY(-160deg);
			transform: rotateY(-160deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Opera */
	@-o-keyframes flipBook1 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-160deg);
			-ms-transform: rotateY(-160deg);
			-o-transform: rotateY(-160deg);
			transform: rotateY(-160deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* flipBook2 */
	@keyframes flipBook2 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-150deg);
			-ms-transform: rotateY(-150deg);
			-o-transform: rotateY(-150deg);
			transform: rotateY(-150deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Firefox */
	@-moz-keyframes flipBook2 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-150deg);
			-ms-transform: rotateY(-150deg);
			-o-transform: rotateY(-150deg);
			transform: rotateY(-150deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Safari and Chrome */
	@-webkit-keyframes flipBook2 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-150deg);
			-ms-transform: rotateY(-150deg);
			-o-transform: rotateY(-150deg);
			transform: rotateY(-150deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Opera */
	@-o-keyframes flipBook2 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-150deg);
			-ms-transform: rotateY(-150deg);
			-o-transform: rotateY(-150deg);
			transform: rotateY(-150deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* flipBook3 */
	@keyframes flipBook3 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-140deg);
			-ms-transform: rotateY(-140deg);
			-o-transform: rotateY(-140deg);
			transform: rotateY(-140deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Firefox */
	@-moz-keyframes flipBook3 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-140deg);
			-ms-transform: rotateY(-140deg);
			-o-transform: rotateY(-140deg);
			transform: rotateY(-140deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Safari and Chrome */
	@-webkit-keyframes flipBook3 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-140deg);
			-ms-transform: rotateY(-140deg);
			-o-transform: rotateY(-140deg);
			transform: rotateY(-140deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/* Opera */
	@-o-keyframes flipBook3 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}

		50% {
			-webkit-transform: rotateY(-140deg);
			-ms-transform: rotateY(-140deg);
			-o-transform: rotateY(-140deg);
			transform: rotateY(-140deg);
		}

		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

	/*书的封面*/
	.book-page-1 .page-front {
		// background-color: #1976D2;
		// background: linear-gradient( 143deg, #FE5E10 0%, #f3c89d 100%);
				background: linear-gradient( 143deg, #191970 0%, #7b68ee 100%);
	}

	.book-page-1 .page-back {
		background-color: #fff;
	}

	.book-page-1 .page-front p {
		font-size: 30px;
		color: #fff;
		margin-top: 100px;
	}
.fenmian_s{
	font-size: 32rpx;
	color: #fff;
	margin-top: 100rpx;
}
.d_gift{
	text-shadow: -5px -5px 10px red !important;
	font-size: 68rpx;
}
	.flip-animation-1 {
		animation: flipBook1 17s;
		-moz-animation: flipBook1 17s;
		/* Firefox */
		-webkit-animation: flipBook1 17s;
		/* Safari and Chrome */
		-o-animation: flipBook1 17s;
		/* Opera */
	}

	/*书的第二页*/
	.book-page-2 .page-back,
	.book-page-2 .page-front {
		background-color: #fff;
	}

	.book-page-2 .page-front p {
		font-size: 30px;
		color: #191970;
		margin-top: 100px;
	}

	.flip-animation-2 {
		animation: flipBook2 13s 2s;
		-moz-animation: flipBook2 13s 2s;
		/* Firefox */
		-webkit-animation: flipBook2 13s 2s;
		/* Safari and Chrome */
		-o-animation: flipBook2 13s 2s;
		/* Opera */
	}

	/*书的第三页*/
	.book-page-3 .page-back,
	.book-page-3 .page-front {
		background-color: #fff;
	}

	.book-page-3 .page-front p {
		font-size: 30px;
		color: #191970;
		margin-top: 100px;
	}

	.flip-animation-3 {
		animation: flipBook3 10s 3s;
		-moz-animation: flipBook3 10s 3s;
		/* Firefox */
		-webkit-animation: flipBook3 10s 3s;
		/* Safari and Chrome */
		-o-animation: flipBook3 10s 3s;
		/* Opera */
	}

	/*书的第四页*/
	.book-page-4 .page-front p {
		font-size: 30px;
		color: #191970;
		margin-top: 100px;
	}
</style>